.loginUser {
  @apply h-full text-center flex items-center relative;

  .head {
    height: 2.125rem;
    width: 2.125rem;
    margin-right: 0.375rem;
  }

  .name {
    @apply block text-sm text-white w-10;
  }

  &:hover .loginMenu {
    @apply block;
  }

  .loginMenu {
    @apply hidden absolute right-0 rounded-lg p-5 bg-bg25;
    top: 4.625rem;
    width: 18.75rem;

    .userInfo {
      @apply flex items-center relative w-full;
      height: 3rem;

      .vipImg {
        @apply relative shrink-0;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        margin-right: 0.625rem;
        background-image: url('/images/user.png');
        background-size: 100% 100%;

        &.vipActive {
          border: 2px solid #ffd1b0;
        }

        &.vipInActive {
          border: 2px solid #d8d8d8;
        }

        .vipLogo {
          @apply absolute bottom-0 right-0;
          width: 0.875rem;
          height: 0.875rem;
        }
      }

      .vipDate {
        &.ellipsis {
          width: calc(100% - 9.375rem);
        }

        &.full {
          @apply flex-1;
        }

        & > p {
          @apply text-left;
        }

        .email {
          @apply text-lg text-white text-white;
          line-height: 1.875rem;
          font-family: Alibaba PuHuiTi 2;
          width:200px;
        }

        .pActive {
          @apply text-xs leading-3;
          font-family: Alibaba PuHuiTi 2;
          line-height: 0.625rem;
          background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
        }

        .pInActive {
          @apply text-white-60 text-xs;
          font-family: Alibaba PuHuiTi 2;
          line-height: 0.625rem;
        }
      }

      .toVip {
        @apply ml-4 leading-5 text-sm;
        width: 4.5rem;
        height: 1.875rem;
        background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
        font-family: Alibaba PuHuiTi 2;
        color: #7c3c19;
      }
    }

    .userTabMenu {
      @apply mt-5 flex justify-between;

      .tabMenuItems {
        @apply opacity-60 w-20 rounded flex flex-col items-center justify-center text-white;

        &:hover {
          @apply opacity-100 cursor-pointer;
        }

        height: 4.75rem;
        background-color: #323232;

        & > img {
          margin-bottom: 0.375rem;
          width: 1.875rem;
          height: 1.875rem;
        }

        & > span {
          @apply m-0 text-xs whitespace-nowrap;
          line-height: 1.125rem;
        }
      }
    }

    .exitText {
      @apply text-xs leading-5 text-white opacity-60 cursor-pointer text-center;
      margin-top: 1.625rem;
      font-family: Alibaba PuHuiTi 2;

      &:hover {
        @apply opacity-100;
      }
    }
  }
}

.notLoginBox {
  @apply h-full flex items-center relative;

  &:hover {
    .loginFloat {
      @apply block;
    }
  }

  .notLogin {
    @apply h-10 w-20 bg-theme cursor-pointer text-base font-semibold text-white;
    background: linear-gradient(90deg, #ffb521 0%, #ff651d 100%);
    span {
      @apply m-0;
    }
  }

  .loginFloat {
    @apply absolute rounded-lg hidden top-20 cursor-pointer;
    right: -1.25rem;
    width: 15rem;
    height: 11.75rem;
    background-image: url('/images/login-float.webp');
    background-size: 100% 100%;
  }
}
